<template>
  <div class="search-item">
    <label class="checkbox-label">
      <TjCheckbox
        v-model:checked="checkeds"
        :disabled="data.checked ? false : data.disabled"
        @change="clickHandler($event)"
      />
      <template v-if="data.avatar">
        <img class="avatar" :src="data.avatar" alt="" />
      </template>
      <template v-else>
        <img class="avatar" src="@/assets/img/oa-img-default.png" alt="" />
      </template>
      <TjPopup
        class="placement top center"
        :disabled="
          data.userName.length + data.mobile.length + data.deptName.length >= 33 ? false : true
        "
        :content="`${data.userName + ' ' + data.mobile + '（' + data.deptName + '）'}`"
        placement="top"
        :overlay-style="{ maxWidth: '215px' }"
        show-arrow
        destroy-on-close
      >
        <div class="all-user">
          <div class="user-box">
            <span class="user-name" v-html="userName"></span>
            <sapn class="phone">{{ data.mobile }}</sapn>
            <span class="job"> （{{ data.deptName }}）</span>
          </div>
        </div>
      </TjPopup>
    </label>
  </div>
</template>

<script>
export default {
  name: 'SearchItem'
};
</script>
<script setup>
import { defineProps, inject, computed, defineEmits, ref } from 'vue';
import { TjPopup, TjCheckbox } from 'tj-design-vue';
import PinyinMatch from 'pinyin-match';
const props = defineProps({
  data: {
    type: Object
  }
});
const checkeds = computed(() => props.data.checked);
// 模糊搜索添加 用于高亮
const searchCriteria = inject('searchCriteria');
// 右侧选择列表
const selectList = inject('selectList');
// 固定数据
const fixData = inject('fixData');
let emit = defineEmits(['clickSearchItem']);
// 添加或者删除选中人员
const addOrDelSelectHandler = inject('addOrDelSelectHandler');
// 点击多选框
const clickHandler = e => {
  addOrDelSelectHandler(e, [props.data], 'userId');
  // e.target.checked = checked.value;
  emit('clickSearchItem', props.data);
};

// 是否选中 (右侧的已选人员selectList 于当前数据userid匹配)
// const checked = computed(() => {
//   console.log(selectList.value);
//   return selectList.value.some(t => t.userId === props.data.userId);
// });

// 高亮搜索
const userName = computed(() => {
  let index = PinyinMatch.match(props.data.userName, searchCriteria.value);
  let v = props.data.userName.slice(index[0], index[1] + 1);
  let reg = new RegExp(v);
  let innerHTML = props.data.userName.replace(
    reg,
    `<span style="color:var(--tj-primary-color) !important;">${v}</span>`
  );
  return innerHTML;
});
</script>

<style lang="less" scoped>
.search-item {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  .all-user {
    width: 390px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .user-box {
    // display: flex;
    width: 390px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .user-subjects {
      margin-left: 8px;
      min-width: 36px;
      min-height: 20px;
      background: #f4f5f6;
      border-radius: 2px;
      font-size: 12px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #929394;
      line-height: 20px;
      padding: 0 6px;
      max-width: 130px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-name {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: left;
      color: rgba(0, 0, 0, 0.8);
    }
    .job {
      margin-left: 4px;
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN-400;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
    }
    .phone {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN-400;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
      margin-left: 4px;
    }
  }
  .user-info {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: rgba(0, 0, 0, 0.6);
  }
  &:hover {
    background: #f5f6f7;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 8px;
  }
}
</style>
